<template>
  <div class="RunFortuneBags-wrap">
    <common-title-bar :mode="'white'" :isShowMoreOption="true" :always="isAlways"></common-title-bar>
    <div class="RunFortuneBags">
      <div class="wrap">
        <h2>恭喜获得</h2>
        <div class="steps-wrap">
          <p class="steps">{{showBagSteps}}</p>
          <p>步</p>
        </div>
        <div class="steps-process-wrap" v-if="bagData && bagData.bless_status == 0">
          <div class="steps-process">
            <div class="steps-process-had" :style="{width: process + '%'}"></div>
          </div>
          <div class="steps-process-text" :style="{left: process + '%'}">还差{{bagData.bless_diff_steps || 0}}步可领取</div>
        </div>
        <div class="hadDone" v-if="bagData && (bagData.bless_status == 1 || bagData.bless_status == 2 || bagData.bless_status == 3)">步数福袋已全部获得</div>
        <div class="steps-countDown">
          <count-down :time="bagData.endTime * 1000" @finish="countDownFinished">
            <template #default="timeData">
              <span class="block">{{timeData.hours ? (timeData.hours > 9 ? timeData.hours : '0' + timeData.hours) : '00'}}</span>
              <span class="colon">:</span>
              <span class="block">{{timeData.minutes ? (timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes) : '00'}}</span>
              <span class="colon">:</span>
              <span class="block">{{timeData.seconds ? (timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds) : '00'}}</span>
              <span class="colon">后福袋失效</span>
            </template>
          </count-down>
        </div>
        <div class="steps-Btn btn-animate" v-if="bagData && bagData.bless_status == 0" @click="inviteHelp">邀请好友拆福袋</div>
        <div class="steps-Btn btn-animate" v-else-if="bagData && bagData.bless_status == 1" @click="drawBless">领取奖励</div>
        <div class="steps-Btn" style="filter: grayscale(1); color: #fff;" v-else-if="bagData && (bagData.bless_status == 2 || bagData.bless_status == 3)" @click="showTips">奖励已领取，明天再来</div>
      </div>
      <div class="steps-rule-and-record-wrap">
        <div class="steps-rule-and-record">
          <tabs v-model="active" title-active-color="#FFAD09">
            <tab title="拆福袋规则">
              <div class="rule-content" v-html="bagData && bagData.rule"></div>
            </tab>
            <tab title="帮拆记录">
              <list class="record-list-wrap">
                <div class="record-list" v-if="bagData && bagData.helpList && bagData.helpList.length">
                  <div class="record" v-for="n in bagData.helpList" :key="n.id">
                    <div class="record-user-info">
                      <div class="record-user-photo">
                        <img :src="photoHttp2Https(n.head)" alt="">
                      </div>
                      <div class="record-user-name ellipsis">{{n.nick}}</div>
                    </div>
                    <div class="record-steps">帮拆得<span>{{n.steps}}</span>步</div>
                  </div>
                </div>
                <div v-else class="record-nodata">
                  <p>暂无数据</p>
                </div>
              </list>
            </tab>
          </tabs>
        </div>
      </div>
    </div>
    <overlay :show="isAssistanceAlert" z-index="11">
      <div class="assitance-success">
        <div class="user-photo-wrap">
          <div class="user-photo">
            <img :src="photoHttp2Https(userHead)" alt="">
          </div>
        </div>
        <p>谢谢你的助力，也送你{{rewardSteps}}步</p>
        <div class="assitance-btn" @click="isAssistanceAlert = false">立即去兑换</div>
      </div>
    </overlay>
  </div>
</template>
<script>
import { CountDown, Tab, Tabs, List, Toast, Overlay } from 'vant'
import CommonTitleBar from '@/components/CommonTitleBar'
import {blessIndex, drawBless, saveUserHelpInfo} from '@/api/request'
import { mapState } from "vuex";
export default {
  name: 'RunFortuneBags',
  data () {
    return {
      process: 0,
      active: 0,
      bagData: {},
      userHead: '',
      rewardSteps: 0,
      hideSteps: 0,
      bagSteps: 0,
      isAssistanceAlert: false
    }
  },
  components: {
    CountDown, Tab, Tabs, List, CommonTitleBar, Overlay
  },
  computed: mapState({
    isAlways: state => {
      return state.isAlways
    },
    showBagSteps () {
      return this.hideSteps.toFixed(0);
    }
  }),
  watch: {
    bagSteps (newValue) {
      console.log(newValue)
      gsap.to(this.$data, { duration: 0.5, hideSteps: newValue });
    },
  },
  created () {
    this.saveUserHelpInfo()
    this.blessIndex()
  },
  methods: {
    countDownFinished () {
      this.blessIndex()
    },
    inviteHelp () {
      this.dataCollect('TE_FUDAI_CLICK', '运动赚颜值', {
        ITEM_ID: 1,
        ITEM_NAME: '邀请好友拆福袋'
      })
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('doShare', {
        type: 1,  // 1 分享网页 2 珠宝小程序 3 宝姐家小程序
        title: this.bagData.shareTitle,
        desc: this.bagData.shareDesc,
        path_url: this.bagData.shareUrl,
        img_url: this.bagData.sharePic
      })
    },
    blessIndex () {
      blessIndex({}).then(res => {
        console.log(res)
        this.bagData = res
        this.bagSteps = res.bless_steps
        setTimeout(() => {
          this.process = Math.floor((res.bless_steps - res.bless_diff_steps)/res.bless_steps * 100).toFixed(2)
        }, 100);
      }).catch(e => {
        if (e == '18009') {
          this.blessIndex()
        } else {
          Toast({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    drawBless () {
      this.dataCollect('TE_FUDAI_CLICK', '运动赚颜值', {
        ITEM_ID: 2,
        ITEM_NAME: '领取奖励'
      })
      drawBless({}).then(res => {
        console.log(res)
        Toast(res.msg)
        this.blessIndex()
      }).catch(e => {
        if (e == '18009') {
          this.drawBless()
        } else {
          Toast({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    saveUserHelpInfo () {
      return new Promise((resolve, reject) => {
        saveUserHelpInfo({
          type: 2 // 类型1：首页2福包
        }).then(res => {
          console.log(res)
          if (res.steps > 0) {
            this.rewardSteps = res.steps
            this.userHead = res.head
            this.isAssistanceAlert = true
          }
          resolve(res)
        }).catch(e => {
          if (e == '18009') {
            this.saveUserHelpInfo()
          } else {
            Toast({
              message: e.msg || e.message,
              duration: 3000
            })
          }
          reject(e)
        })
      })
    },
    showTips () {
      Toast('奖励已领取，明天再来')
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .common-title .title, /deep/ .common-title .back svg{
    fill: #fff;
    color: #fff;
  }
  .RunFortuneBags-wrap{
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(358deg, #5cf2ff 0%, #e1aafe 100%);

    .RunFortuneBags{
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 100vh;
      background: url(../../assets/images/activity_3_bg.jpg) no-repeat;
      background-size: 100% auto;
      background-position: top center;
      overflow: hidden;

      .wrap{
        height: 9.95rem;
        overflow: hidden;
        >h2{
          font-size: 0.44rem;
          color: #FFDE9A;
          margin: 3.5rem auto 0;
          text-align: center;
        }
      } 
      .steps-wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.3rem auto 0;

        p{
          font-size: 0.8rem;
          color: #fff;
          font-weight: bold;
          text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
        }
        .steps{
          font-size: 1rem;
        }
      }
      .steps-process-wrap{
        position: relative;
        width: 4rem;
        margin: 0.8rem auto 0;
        .steps-process{
          position: relative;
          width: 4rem;
          height: 0.2rem;
          border-radius: 0.1rem;
          background: #fff;
          overflow: hidden;

          .steps-process-had{
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            transition: 1s;
            height: 100%;
            background: linear-gradient(180deg, #FFED3C 0%, #FFB91C 100%);
            border-radius: 0.1rem;
          }
        }
        .steps-process-text{
          position: absolute;
          top: -0.62rem;
          display: inline-block;
          padding: 0 0.1rem;
          font-size: 0.2rem;
          color: #C46800;
          height: 0.42rem;
          text-align: center;
          line-height: 0.42rem;
          background: #FFEFCE;
          border-radius: 0.1rem;
          transform: translateX(-50%);
          white-space: nowrap;
          transition: 1s;
        }
        .steps-process-text::after{
          position: absolute;
          bottom: -0.16rem;
          content: "";
          width: 0.23rem;
          height: 0.21rem;
          left: 50%;
          transform: translateX(-50%);
          background: url(../../assets/images/triangle.png) no-repeat;
          background-size: contain;
        }
      }
      .hadDone{
        font-size: 0.36rem;
        color: #fff;
        margin: 0.4rem auto 0;
        text-align: center;
      }
      .steps-countDown{
        font-size: 0.24rem;
        margin: 0.23rem auto 0;
        text-align: center;
        .block{
          font-size: 0.24rem;
          display: inline-block;
          width: 0.34rem;
          height: 0.32rem;
          background: #FFDF9C;
          color: #C46800;
          text-align: center;
          line-height: 0.32rem;
          border-radius: 0.05rem;
        }
        .colon{
          color: #FFDF9D;
        }
      }
      .steps-Btn{
        width: 6.43rem;
        height: 0.97rem;
        margin: 1rem auto 0;
        background: url(../../assets/images/run_activity_btn.png) no-repeat;
        background-size: contain;
        font-size: 0.36rem;
        color: #8B410A;
        text-align: center;
        line-height: 0.97rem;
        font-weight: bold;
      }
      .btn-animate{
        animation: btnBreath 1.5s linear infinite;
      }
      @keyframes btnBreath {
        0%{
          transform: scale(1);
        }
        50%{
          transform: scale(1.1);
        }
        100%{
          transform: scale(1);
        }
      }
      .steps-rule-and-record-wrap{
        flex: 1;
        width: 100%;
        border-radius: 0.2rem 0.2rem 0 0;
        background: #fff;
        .steps-rule-and-record{
          width: 100%;
          min-height: 5rem;
          border-radius: 0.2rem 0.2rem 0 0;
          background: #fff;
          overflow: hidden;

          /deep/ .van-tabs__line{
            background-color: #FFAD09;
          }
          .rule-content{
            padding: 0.3rem;

            /deep/ P{
              display: flex;
              flex-direction: column;
            }
          }
          .record-list-wrap{
            padding: 0 0.3rem;

            .record-list{
              
              .record{
                height: 1.28rem;
                border-bottom: 0.02rem solid #EFEFEF;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .record-user-info{
                  display: flex;
                  align-items: center;
                  width: 60%;

                  .record-user-photo{
                    flex-shrink: 0;
                    display: flex;
                    width: 0.8rem;
                    height: 0.8rem;
                    border-radius: 0.4rem;
                    overflow: hidden;

                    img{
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                    }
                  }
                  .record-user-name{
                    font-size: 0.26rem;
                    color: #000000;
                    margin-left: 0.28rem;
                  }
                }
                .record-steps{
                  font-size: 0.24rem;
                  color: #000;
                  span{
                    color: #FF9900;
                  }
                }
              }
            }
            .record-nodata{
              width: 100%;
              background: url(../../assets/images/nodata.png) no-repeat;
              background-size: 1.36rem 0.88rem;
              background-position: center 1rem;
              overflow: hidden;

              p{
                font-size: 0.3rem;
                color: #999999;
                text-align: center;
                margin: 2rem auto 0;
              }
            }
          }
        }
      }
      
    }
    .assitance-success{
      width: 5.8rem;
      height: 6.27rem;
      background: #fff;
      border-radius: 0.2rem;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 11;
      transform: translate(-50%, -50%);

      .user-photo-wrap{
        width: 3.65rem;
        height: 2.87rem;
        margin: 0.7rem auto 0;
        background: url(../../assets/images/photoBg.png) no-repeat;
        background-size: 3.65rem 2.05rem;
        background-position: center bottom;

        .user-photo{
          width: 2.24rem;
          height: 2.24rem;
          border: 0.08rem solid #FFE738;
          margin: 0 auto;
          border-radius: 1.2rem;
          overflow: hidden;

          img{
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
          }
        }
      }
      >p{
        font-size: 0.36rem;
        color: #000;
        text-align: center;
        margin: 0.36rem auto 0 ;
      }
      .assitance-btn{
        width: 4.5rem;
        height: 0.86rem;
        font-size: 0.36rem;
        color: #fff;
        text-align: center;
        line-height: 0.86rem;
        margin: 0.36rem auto 0;
        border-radius: 0.43rem;
        background: linear-gradient(180deg, #FFED3C 0%, #FFB91C 100%);
      }
    }
  }
</style>